<template>
    <div>
        <el-drawer v-model="visible" class="audit-drawer">
            <template #header>
                <custom-title title="审批" />
            </template>
            <div class="container-body">
                <div class="form-container">
                    <div class="form-items">
                        <form-render ref="formRenderRef" :forms="data.formItems" v-model="data.formData" />
                    </div>
                </div>
                <div class="followUp-container">
                    <div class="title">审批记录</div>
                    <div class="audit-list">
                        <template v-if="data.progress?.length">
                            <div class="audit-item" v-for="item, index in data.progress">
                                <div class="audit-header">
                                    <img :class="{ blue: item.result }" :src="item.user.avatar || avatar" alt="" />
                                    <div>
                                        <div class="audit-title">
                                            {{ item.name }} <span>{{ item.finishTime }}</span>
                                        </div>
                                        <div class="audit-status">{{ item.user.name }}（{{ auditResult(item) }}）
                                        </div>
                                    </div>
                                </div>
                                <div
                                    :class="{ 'audit-desc': true, divider: true, blue: item.result, border: index == data.progress.length - 1 }">
                                    <div class="content" v-if="comment(item)">
                                        {{ comment(item) }}
                                    </div>
                                </div>
                            </div>
                        </template>
                        <a-empty />
                    </div>
                    <div class="audit-btn-container" v-if="isAudit">
                        <el-input type="textarea" placeholder="请输入审批意见" v-model.trim="auditParams.comment.text" />
                        <div class="form-btns">
                            <el-button @click="audit('refuse')">拒绝</el-button>
                            <el-button type="primary" @click="audit('agree')">同意</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import { computed, ref, onMounted } from "vue";
import { approvalForm, handlerTask, getAudit } from "@/apis/payments";
import avatar from "@/assets/images/avatar.png";
import { ElMessage } from 'element-plus';

const data = ref({})
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    code: {
        type: Object,
        default: () => ({})
    }
});
const formRenderRef = ref();
const emit = defineEmits(["update:show", 'success'])
const visible = computed({
    set: (val) => {
        emit("update:show", val)
    },
    get: () => {
        return props.show;
    }
});
const comment = (data) => {
    return data?.comment?.length ? data?.comment[0]?.text : "";
};
const isAudit = ref(false);
const auditParams = ref({
    comment: { text: '' },
    instanceId: props.code,
    taskId: '',
    nodeId: ''
})
/**
 * 获取自定义表单内容
 */
const getFormItems = async () => {
    try {
        const res = await approvalForm(props.code);
        const formItems=res.data.formItems?res.data.formItems.map(v => ({ ...v, props: { ...v.props, disabled: true } })):[]
        data.value = { ...res.data, formItems};
        const auditData = await getAudit(props.code);
        if (auditData.data.taskId && auditData.data.nodeId) {
            isAudit.value = true;
            auditParams.value.nodeId = auditData.data.nodeId;
            auditParams.value.taskId = auditData.data.taskId;
        }
    } catch (error) {

    }

}
const auditStatusMap = new Map([
    ["complete", "发起申请"],
    ["refuse", "已拒绝"],
    ["recall", "已拒绝"], // 退回
    ["agree", "已同意"],
    ["info", "已取消"]
]);
/**
 * 获取审批状态
 */
const auditResult = (data) => {
    if (!data?.result) {
        return "审批中";
    }
    return auditStatusMap.get(data.result) || "";
};
/**
 * 审批
 */
const audit = async (action) => {
    const res = await handlerTask({ ...auditParams.value, action, formData: data.value.formData });
    if (res.code == 200) {
        ElMessage.success("操作成功");
        emit('update:show', false)
        emit('success')
    }
};
onMounted(() => {
    getFormItems()
})
</script>

<style lang="scss" scoped>
.container-body {
    display: flex;
    height: calc(100vh - 52px);

    .form-container {
        height: 100%;
        width: 50%;
        box-sizing: border-box;
        border-right: 1px solid #DCDFE6;
        padding: 20px;
    }

    .followUp-container {
        width: 50%;
        box-sizing: border-box;
        padding-left: 16px;
        position: relative;
        padding-top: 20px;

        .title {
            font-weight: 400;
            font-size: 18px;
            color: #3D3D3D;
            line-height: 24px
        }
    }
}



.form-items {
    height: calc(100vh - 113px);
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: #F6F8FA;
    border: 1px solid #DCDFE6;

    .micro-app,
    :deep(micro-app-body) {
        min-width: 100% !important;
    }

}

.followUp-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.audit-list {
    max-height: 60vh;
    overflow-y: scroll;
    margin: 30px 0;
    padding-right: 10px;

    .audit-item {
        .audit-header {
            display: flex;
            align-items: center;

            .blue {
                border: 2px solid #409EFF;
            }

            img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }

            >div {
                margin-left: 16px;
                width: 100%;

                .audit-title {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 8px;
                }
            }
        }

        .audit-desc,
        .audit-status,
        .content,
        span {
            color: #86909C;
            font-size: 12px;
        }

        .audit-desc,
        .divider {
            margin-left: 20px;
            border-left: 3px solid rgb(var(--gray-2));
        }

        .blue {
            border-left: 3px solid #409EFF;
        }

        .divider {
            height: 90px;
        }

        .border {
            border: none;
        }

        .audit-desc {
            padding: 10px 0 10px 36px;

            .content {
                background: #F6F8FA;
                width: 100%;
                border-radius: 4px;
                padding: 12px;
                box-sizing: border-box;
            }
        }
    }
}

.audit-btn-container {
    width: calc(100% - 40px);
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.form-btns {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 20px;
}
</style>

<style lang="scss">
$border: 1px solid #DCDFE6;

.audit-drawer {
    border-radius: 10px 0 0 10px;
    width: 900px !important;

    .el-drawer__header {
        border-bottom: $border;
        height: 50px;
        padding-top: 0;
        margin-bottom: 0;
    }

    .el-drawer__body {
        padding: 0;
    }
}
</style>